<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    id<input type="text" name="id" id="id" style="margin-left: 34px"><br>
    名字<input type="text" name="firstName" id="firstName" style="margin-left: 16px"><br>
    姓<input type="text" name="lastName" id="lastName" style="margin-left: 32px"><br>
    邮箱<input type="text" name="email" id="email" style="margin-left: 16px"><br>
    手机号<input type="text" name="mobile" id="mobile" ><br>
    生日<input type="text" name="dateOfBirth" id="dateOfBirth" style="margin-left: 16px"><br><br>
    <button>修改</button><br><br>
<br>

<table id="mytab" border="1">
    <tr>
        <th>#</th>
        <th>名</th>
        <th>姓</th>
        <th>邮箱</th>
        <th>手机号</th>
        <th>生日</th>
    </tr>
</table>

<script src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){
       // alert(id)

        var url=location.search;
        var Request = new Object();
        if(url.indexOf("?")!=-1){
            var str = url.substr(1)　//去掉?号
            strs = str.split("&");
            for(var i=0;i<strs.length;i++){
                Request[strs[i ].split("=")[0]]=unescape(strs[i].split("=")[1]);
            }
        }
        //alert(Request["id"]);

        var $id=Request["id"];

      //  alert($id);

        $.ajax({
            url : 'http://172.16.0.118:8080/customers/'+$id ,
            type : 'GET',
            success : function(data) { // 数据状态success
                alert(data.firstName);
               // console.log(data.id);
                $('#id').val(data.id);
                $('#firstName').val(data.firstName);
                $('#lastName').val(data.lastName);
                $('#email').val(data.email);
                $('#mobile').val(data.mobile);
                $('#dateOfBirth').val(data.dateOfBirth);

            }
        });




        $('button').on('click',function(){
            var $tab1 = $("#mytab");
            // alert(1);

            var $id=$('#id').val();
            var $firstName=$('#firstName').val();
            var $lastName=$('#lastName').val();
            var $email=$('#email').val();
            var $mobile=$('#mobile').val();
            var $dateOfBirth=$('#dateOfBirth').val();

            $.ajax({
                url : "http://172.16.0.118:8080/customers",
                type : 'POST',
                dataType : 'json',
                contentType:"application/json;charset=utf-8",

                //data:"{id:$id,\"firstName\":\""+$("$firstName")+"\"\"lastName\":\""+$("$lastName")+"\"\"email\":\""+$("$email")+"\"\"mobile\":\""+$("$mobile")+"\"\"dateOfBirth\":\""+$("$dateOfBirth")+"\}",

                data:{id:$id,firstName:$firstName,lastName:$lastName,email:$email,mobile:$mobile,dateOfBirth:$dateOfBirth},
                success : function(data) { // 数据状态success
                    //alert(data);
                    console.log(data);
                    for(var i=0;i<data.length;i++){
                        $tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>"+ data[i].email + "</td><td>"
                            + data[i].mobile+ "</td><td>"
                            + data[i].dateOfBirth + "</td></tr>");

                    }

                }
            });
        });
    });
</script>


</body>
</html>